<template>
  <div class="home-bg">
    <div class="padding-top-20 padding-left-right-20">
      <div class="flex bg-white justify-between">
        <lease-rate class="chart-box" :project-options="projectOptions" ref="lease"></lease-rate>
        <div class="split-line"></div>
        <collection-rate class="chart-box" :projectOptions="projectOptions" ref="collection"></collection-rate>
      </div>
      <div class="flex bg-white margin-top-20">
        <business-proportion class="chart-box" :projectOptions="projectOptions" ref="business"></business-proportion>
        <div class="split-line"></div>
        <exceed-arrearage v-if="$verifyPerms('arrearageShareholder')" class="chart-box" :projectOptions="projectOptions" ref="exceed"></exceed-arrearage>
        <arrearage v-if="$verifyPerms('arrearageStaff')" class="chart-box" :projectOptions="projectOptions" ref="arrearage"></arrearage>
      </div>
    </div>

    <operate-home pageType="businessBuilding"></operate-home>
  </div>
</template>
<script>
  import operateHome from '../roomStatus/tabPage/index.vue';
  import leaseRate from './components/leaseRate.vue';
  import collectionRate from './components/collectionRate.vue';
  import businessProportion from './components/businessProportion.vue';
  import exceedArrearage from './components/exceedArrearage.vue';
  import arrearage from './components/arrearage.vue';
  import { projectList } from '@/api';
  export default {
    components: { operateHome, leaseRate, collectionRate, businessProportion, exceedArrearage, arrearage },

    data() {
      return {
        projectOptions: [],
      };
    },

    methods: {
      async getProjectList() {
        let res = await projectList({});
        this.projectOptions = res.rows;
        let projectKey = res.rows.length > 0 ? res.rows[0].projectKey : '';
        for (let i in this.$refs) {
          this.$refs[i].initData(projectKey);
        }
      },
    },

    mounted() {
      this.getProjectList();
    },
  };
</script>
<style scoped lang="scss">
  .split-line {
    width: 20px;
    background: #f8f8f8;
  }
  .chart-box {
    height: 410px;
    width: 50%;
  }
</style>
